<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 400;

  const c2d = cvs.getContext("2d");


  // 位移指定的距离
  // c2d.translate( 50, 20 );
  // c2d.strokeRect(100, 100, 200, 100);



  // let x = 100;
  // let y = 100;
  // let w = 200;
  // let h = 100;
  // c2d.translate( x + w/2, y + h/2 );
  // 旋转指定弧度
  // c2d.rotate( 0.3 );
  // c2d.strokeRect( -w/2, -h/2, w, h );


  // c2d.translate( 200, 150 );
  // 缩放指定倍数
  // c2d.scale( 2, 2 );
  // c2d.strokeRect(-100, -50, 200, 100);

  // 注意：
  // 所有转换的中心点，都是canvas的0,0坐标（左上角）

  // 为了实现以某个图形的中心点作为转换的中心点效果
  // 1. 需要将图形的中心点绘制到画布的0,0点
  // 2. 通过位移，移动到实际位置
  // 3. 再进行旋转或缩放操作

  // =========

  // 为了给不同的图形应用不同的转换（每个图形单独操作）
  // 需要将画笔的状态保存起来（类似于拷贝一个画布的副本）

  // 保存状态：c2d.save()
  // 清除状态：c2d.restore()

  c2d.save()
  c2d.rotate( 0.3 );
  c2d.strokeRect(50, 50, 100, 100);
  c2d.restore()

  c2d.save()
  c2d.rotate( -0.3 );
  c2d.strokeRect(50, 200, 130, 100);
  c2d.restore()

  c2d.strokeRect(50, 320, 80, 40);



  
</script>
</html>